<template>
<div class="main">
  <el-dialog
  title="评价内容"
  :visible.sync="dialogVisible"
  width="30%">
  <span>{{tComent}}</span>
  <div style="margin: 20px 0;"></div>
  <el-rate
    v-model="value"
    show-text>
  </el-rate>
</el-dialog>
<!-- 教师信息 -->
  <el-dialog
  title="教师信息"
  :visible.sync="teacherShow"
  width="50%">
  <div class="techerArea" style="font-size:18px">
    <div class="top">
      <div class="top-l">
        <img style="width:100%;height:100%" :src="evUrl+newInfo.t_pic"/>
      </div>
      <div class="top-r" style="padding-top:28px">
        <div style="margin-bottom:8px">账号：{{newInfo.t_username}}</div>
        <div>姓名：{{newInfo.t_name}}</div>
      </div>
    </div>
    <div class="bottom">
      <div>性别：{{newInfo.t_sex}}</div>
      <div>民族：{{newInfo.native_place}}</div>
      <div>手机号码：{{newInfo.t_phone}}</div>
      <div>专业：{{newInfo.major}}</div>
      <div>电子邮箱：{{newInfo.t_email}}</div>
      <div>毕业院校：{{newInfo.t_university}}</div>
      <div>支教次数：{{newInfo.t_count}}</div>
      <div>联系地址：{{newInfo.t_addr}}</div>
    </div>
  </div>
</el-dialog>
<!-- 学校信息 -->
  <el-dialog
  title="学校信息"
  :visible.sync="schoolShow"
  width="50%">
  <div class="schoolArea" style="font-size:18px">
    <div class="top">
      <div class="top-l">
        <img style="width:100%;height:100%" :src="evUrl+newInfo.s_pic"/>
      </div>
      <div class="top-r"  style="padding-top:28px">
        <div style="margin-bottom:8px">账号：{{newInfo.s_username}}</div>
        <div>校名：{{newInfo.s_name}}</div>
      </div>
    </div>
    <div class="bottom">
      <div>手机号码：{{newInfo.s_phone}}</div>
      <div>电子邮箱：{{newInfo.s_email}}</div>
      <div>联系地址：{{newInfo.s_addr}}</div>
      <div>学校简介：{{newInfo.s_introduction}}</div>
    </div>
  </div>
</el-dialog>
<!-- 项目信息 -->
  <el-dialog
  title="活动信息"
  :visible.sync="itemShow"
  width="50%">
  <div class="itemArea"  style="font-size:18px">
    <div class="top">
      <div class="top-l">
        <img style="width:100%;height:100%" :src="evUrl+newInfo.item_pic"/>
      </div>
      <div class="top-r" style="padding-top:28px">
        <div>活动标题：{{newInfo.item_tit}}</div>
        <div>服务时长：{{newInfo.service_time}}</div>
        <div>联系人：{{newInfo.contacts}}</div>
        <div>手机号码：{{newInfo.phone}}</div>
        <div>岗位名称：{{newInfo.station}}</div>
        <div>岗位人数：{{newInfo.num}}</div>
        <div>活动地址：{{newInfo.addr}}</div>
        <div>活动描述：{{newInfo.item_describe}}</div>
        <div>报名截止时间：{{newInfo.endTime}}</div>
        <div>活动类型：{{newInfo.item_type}}</div>
      </div>
    </div>
  </div>
</el-dialog>
<div class="body">
  <el-table
    :data="tableData"
    style="width: 100%;font-size:16px"
    size="mini"
    :cell-style="{textAlign:'center',padding:'7px'}"
    :header-cell-style="{background:'orange',color:'#ffffff',textAlign:'center',padding:'3px',opacity:0.7}">
    <!-- <el-table-column
      label="编号"
      prop="w_id">
    </el-table-column> -->
    <el-table-column
      label="学校"
      prop="s_name">
    </el-table-column>
    <el-table-column
      label="教师"
      prop="t_name">
    </el-table-column>
    <el-table-column
    label="学校信息">
      <template slot-scope="scope">
        <el-button
          size="mini"
          style="background:yellow;color:#fff"
          @click="handleSchool(scope.row)">详情</el-button>
      </template>
    </el-table-column>
    <el-table-column
    label="教师信息">
      <template slot-scope="scope">
        <el-button
          size="mini"
          style="background:blue;color:yellow"
          @click="handleTeacher(scope.row)">详情</el-button>
      </template>
    </el-table-column>
    <el-table-column
    label="活动信息">
      <template slot-scope="scope">
        <el-button
          size="mini"
          style="background:green;color:yellow"
          @click="handleItem(scope.row)">详情</el-button>
      </template>
    </el-table-column>
    <!-- <el-table-column
      label="项目信息"
      prop="itemId">
    </el-table-column> -->
    <el-table-column
    label="状态">
      <template slot-scope="scope">
        <el-tag>{{scope.row.status=='1'? '已完成':'进行中'}}</el-tag>
      </template>
    </el-table-column>
    <el-table-column
    label="评价">
      <template slot-scope="scope">
        <el-button
          v-if="scope.row.comment"
          size="mini"
          type="info"
          @click="myConment(scope.row)">查看</el-button>
          <el-button
          v-else
          size="mini" disabled>暂无</el-button>
      </template>
    </el-table-column>
    <el-table-column
      align="right"
      width="180">
      <template slot="header" slot-scope="scope">
        <el-input
          v-model="search"
          size="mini"
          placeholder="输入学校关键字搜索"/>
      </template>
      <template slot-scope="scope">
        <el-button
          size="mini"
          type="danger"
          @click="deleteRecord(scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</div>
  <div class="pageFooter" style="position:absolute;right:0;bottom:0">
    <el-pagination
  background
      @current-change="handleCurrentChange"
      :current-page.sync="thePage"
      :page-size="10"
  layout="prev, pager, next"
  :total="total">
</el-pagination>
  </div>
</div>
</template>

<script>
import { AmakeRecord, deleteRecord } from '../api/record'
import TrecordVue from './Trecord.vue'
export default {
  data () {
    return {
      evUrl: this.$evUrl,
      teacherShow: false,
      schoolShow: false,
      itemShow: false,
      tableData: [],
      beforeData: [],
      newInfo: {},
      search: '',
      dialogVisible: false,
      tComent: '',
      value: null,
      total: 0,
      thePage: 1
    }
  },
  methods: {
    // 项目信息
    handleItem (row) {
      this.newInfo = row
      this.itemShow = true
    },
    // 学校信息
    handleSchool (row) {
      this.newInfo = row
      this.schoolShow = true
    },
    // 教师信息
    handleTeacher (row) {
      this.newInfo = row
      this.teacherShow = true
    },
    // 选择页码
    handleCurrentChange (val) {
      this.thePage = val
      this.tableData = this.beforeData.slice(10 * this.thePage - 10, 10 * this.thePage)
    },
    handleEdit (index, row) {
      // console.log(index, row)
    },
    // 查看评价内容
    myConment (row) {
      this.dialogVisible = true
      this.tComent = row.comment
      this.value = row.level
    },
    // 删除记录
    deleteRecord (row) {
      deleteRecord({ wId: row.w_id }).then(({ data }) => {
        this.$message.info(data.message)
        this.getRecord()
      })
    },
    // 获取记录
    getRecord () {
      AmakeRecord({ hello: 'good' }).then(({ data }) => {
        this.beforeData = data
        this.total = data.length
        // console.log(this.total)
        // console.log(data)
        this.tableData = data.slice(0, 10)
      })
    }
  },
  watch: {
    search (newName, oldName) {
      // this.thePage = 0
      const newArr = this.beforeData.filter(data => !this.search || data.s_name.includes(this.search))
      this.total = newArr.length
      this.tableData = newArr.slice(this.thePage * 10 - 10, this.thePage * 10)

      // console.log(newName)
    }
  },
  mounted () {
    this.getRecord()
  }
}
</script>
<style scoped lang='less'>

  /deep/ .el-input__inner {
    background: transparent;
    border:1px solid skyblue;
    color:#fff;
}
/deep/ .el-input__inner::placeholder{
  color:#fff;

}
.main{
  .techerArea{
    padding:8px;
    .top{
      display:flex;
      justify-content: start;
      width:100%;
      height: 128px;
      .top-l{
        width: 128px;
        margin-right:8px;
      }
    }
    .bottom{
      div{
        margin-bottom:8px;
      }

    }
  }
  .schoolArea{
     padding:8px;
    .top{
      display:flex;
      justify-content: start;
      width:100%;
      height: 128px;
      .top-l{
        width: 128px;
        margin-right:8px;
      }
    }
    .bottom{
      div{
        margin-bottom:8px;
      }

    }

  }
  .itemArea{
    padding:8px;
    .top{
      display:flex;
      justify-content: start;
      width:100%;
      // height: 128px;
      .top-l{
        width: 128px;
        height: 128px;
        margin-right:8px;
      }
      .top-r{
        div{
          margin-bottom:8px;
        }
      }
    }
  }
}
</style>
